<template>
  <n-user-info :selected="2">
    <template #default>
      <div style="width: 100%; background-color: #fff; --el-color-primary: #3271ae; padding: 10px; margin-bottom: 20px;">
        <el-tabs v-model="activeName">
          <el-tab-pane
            label="个人信息"
            name="1"
          ><user-setting></user-setting></el-tab-pane>
          <el-tab-pane
            label="头像照片"
            name="2"
          ><avatar-setting @uploadAvatarSubmit="uploadAvatarSubmit"></avatar-setting></el-tab-pane>
        </el-tabs>
      </div>
    </template>

  </n-user-info>
</template>

<script>
import NUserInfoVue from "@/components/NUserInfo.vue";
import UserSettingVue from "@/components/setting/UserSetting.vue";
import AvatarSettingVue from "@/components/setting/AvatarSetting.vue";
import { ElMessage } from "element-plus";
import { userUploadAvatar } from "@/api/user";
import { useUserInfo } from "@/store/user.js";
const userInfoState = useUserInfo();

export default {
  components: {
    NUserInfo: NUserInfoVue,
    UserSetting: UserSettingVue,
    AvatarSetting: AvatarSettingVue,
  },
  data() {
    return {
      activeName: "1",
    };
  },
  methods: {
    uploadAvatarSubmit(value) {
      var file = value.file;
      var form = new FormData();
      form.append("avatar", file);

      userUploadAvatar(form).then((res) => {
        ElMessage.success("更新成功");
        userInfoState.avatar = res;
      });
    },
  },
};
</script>